<template>
    <div>
        <!--面包屑导航区域-->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/submitterIndex' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>采购信息</el-breadcrumb-item>
        </el-breadcrumb>

        <!--卡片视图区域-->
        <el-card>
            <!--搜索与添加区域-->
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-input placeholder="请输入查询信息" v-model="queryInfo.query" clearable
                              @clear="getApplyInformationList">
                        <el-button slot="append" icon="el-icon-search" @click="getApplyInformationList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible = true">增加采购</el-button>
                </el-col>
            </el-row>

            <!--采购列表区域-->
            <el-table :data="applyInformationList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="货物名称">
                    <template slot-scope="scope">
                        <el-tag size="medium">{{ scope.row.goodsName }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="货物数量" prop="goodsNum"></el-table-column>
                <el-table-column label="采购员" prop="buyerName"></el-table-column>
                <el-table-column label="采购员联系方式" prop="buyerContact"></el-table-column>
                <el-table-column label="采购状态" prop="status"
                                 :filters="[{ text: '待处理', value: '待处理' }, { text: '已接单', value: '已接单' }, { text: '待发货', value: '待发货' }, { text: '待签收', value: '待签收' }, { text: '已完成', value: '已完成' }]"
                                 :filter-method="filterStatus">
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.status === '待处理'">待处理</el-tag>
                        <el-tag type="info" v-else-if="scope.row.status === '已接单'">已接单</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.status === '待发货'">待发货</el-tag>
                        <el-tag v-else-if="scope.row.status === '待签收'">待签收</el-tag>
                        <el-tag type="success" v-else>已完成</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-tooltip effect="dark" content="修改" placement="top" :enterable="false"
                                    v-if="scope.row.status === '待处理'">
                            <el-button type="primary" size="mini" icon="el-icon-edit"
                                       @click="showEditDialog(scope.row.applyInformationId)"></el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="删除" placement="top" :enterable="false"
                                    v-if="scope.row.status === '待处理'">
                            <el-button type="danger" size="mini" icon="el-icon-delete"
                                       @click="removeApplyInformation(scope.row.applyInformationId)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页区域-->
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.current"
                    :page-sizes="[2, 3, 5, 10]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>

        <!--添加采购信息的对话框-->
        <el-dialog title="添加采购信息" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
            <!--内容主体区域-->
            <el-form ref="addApplyInformationRef" :model="addApplyInformation" :rules="addApplyInformationRules"
                     label-width="70px">
                <el-form-item label="名称" prop="goodsName">
                    <el-input v-model="addApplyInformation.goodsName"></el-input>
                </el-form-item>
                <el-form-item label="数量" prop="goodsNum">
                    <el-input v-model.number="addApplyInformation.goodsNum"></el-input>
                </el-form-item>
            </el-form>
            <!--底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOneApplyInformation">确 定</el-button>
            </span>
        </el-dialog>

        <!--修改采购信息的对话框-->
        <el-dialog title="修改采购信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
            <el-form ref="editApplyInformationRef" :model="editApplyInformation" :rules="editApplyInformationRules"
                     label-width="70px">
                <el-form-item label="名称" prop="goodsNum">
                    <el-input v-model="editApplyInformation.goodsName"></el-input>
                </el-form-item>
                <el-form-item label="数量" prop="goodsNum">
                    <el-input v-model.number="editApplyInformation.goodsNum"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editOneApplyInformation">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script scoped>
    export default {
        data() {
            var checkNumber = (rule, value, callback) => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (value < 0) {
                        callback(new Error('必须大于等于0'));
                    } else {
                        callback();
                    }
                }
            }
            return {
                queryInfo: {
                    submitterId: '',
                    query: '',
                    // 当前的页数
                    current: 1,
                    // 当前每页显示多少条数据
                    pageSize: 7
                },
                applyInformationList: [],
                total: 0,
                token: '',
                //控制添加采购信息对话框的显示与隐藏
                addDialogVisible: false,
                //添加采购信息的表单数据
                addApplyInformation: {
                    goodsName: '',
                    goodsNum: ''
                },
                //添加采购信息的验证规则对象
                addApplyInformationRules: {
                    goodsName: [
                        {required: true, message: '请输入货物名称', trigger: 'blur'}
                    ],
                    goodsNum: [
                        {required: true, message: '请输入货物数量', trigger: 'blur'},
                        {validator: checkNumber, trigger: 'blur'}
                    ]
                },
                //控制修改采购信息对话框的显示与隐藏
                editDialogVisible: false,
                //查询到的采购信息对象
                editApplyInformation: {},
                //修改表单验证规则对象
                editApplyInformationRules: {
                    goodsName: [
                        {required: true, message: '请输入货物名称', trigger: 'blur'}
                    ],
                    goodsNum: [
                        {required: true, message: '请输入货物数量', trigger: 'blur'},
                        {validator: checkNumber, trigger: 'blur'}
                    ]
                }
            }
        },
        async created() {
            this.token = window.sessionStorage.getItem("token")
            var submitter = await this.$http.get('/user/submitter/getInformationFromToken', {
                params: {
                    token: this.token
                }
            })
            this.queryInfo.submitterId = submitter.data.data.submitterId
            this.getApplyInformationList()
        },
        methods: {
            async getApplyInformationList() {
                var result = await this.$http.get('user/submitter/selectApplyInformation', {params: this.queryInfo})
                if (result.data.status !== 200) {
                    return this.$message.error("获取采购信息列表失败！")
                }
                this.applyInformationList = result.data.data.records
                this.total = result.data.data.total
            },
            //监听pagesize改变的事件
            handleSizeChange(newSize) {
                this.queryInfo.pageSize = newSize
                this.getApplyInformationList()
            },
            //监听页码值改变的事件
            handleCurrentChange(newPage) {
                this.queryInfo.current = newPage
                this.getApplyInformationList()
            },
            //监听添加采购信息对话框的关闭事件
            addDialogClosed() {
                this.$refs.addApplyInformationRef.resetFields()
            },
            //点击添加采购信息
            addOneApplyInformation() {
                this.$refs.addApplyInformationRef.validate(async valid => {
                    if (!valid) return
                    this.addApplyInformation.submitterId = this.queryInfo.submitterId
                    //发起网络请求
                    const result = await this.$http.post('user/submitter/saveApplyInformation', this.addApplyInformation)
                    if (result.data.status !== 200) {
                        this.$message.error('请完善个人联系方式！')
                        this.addDialogVisible = false
                        return
                    }
                    this.$message.success('添加采购信息成功！')
                    // 隐藏添加采购信息的对话框
                    this.addDialogVisible = false
                    // 重新获取采购信息列表数据
                    this.getApplyInformationList()
                })
            },
            //展示编辑采购信息的对话框
            async showEditDialog(applyInformationId) {
                const result = await this.$http.get('user/submitter/selectApplyInformationById', {
                    params: {
                        applyInformationId: applyInformationId
                    }
                })
                if (result.data.status !== 200) {
                    return this.$message.error('查询采购信息失败！')
                }
                this.editApplyInformation = result.data.data
                this.editDialogVisible = true
            },
            //监听修改采购信息对话框的关闭事件
            editDialogClosed() {
                this.$refs.editApplyInformationRef.resetFields()
            },
            //修改货物信息并提交
            editOneApplyInformation() {
                this.$refs.editApplyInformationRef.validate(async valid => {
                    if (!valid) return
                    // 发起修改采购信息的数据请求
                    const result = await this.$http.put('user/submitter/updateApplyInformation', this.editApplyInformation)
                    if (result.data.status !== 200) {
                        return this.$message.error('采购员已经确认采购申请，无法修改哦~~~！')
                    }
                    // 关闭对话框
                    this.editDialogVisible = false
                    // 刷新数据列表
                    this.getApplyInformationList()
                    // 提示修改成功
                    this.$message.success('更新采购信息成功！')
                })
            },
            //根据账号删除货物
            async removeApplyInformation(applyInformationId) {
                //弹框是否删除
                const confirmResult = await this.$confirm('此操作将永久删除该货物, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(error => error)
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                const result = await this.$http.delete('user/submitter/deleteApplyInformation', {
                    params: {
                        applyInformationId: applyInformationId
                    }
                })
                if (result.data.status !== 200) {
                    return this.$message.error('删除采购信息失败！')
                }
                this.$message.success('删除采购信息成功！')
                this.getApplyInformationList()
            },
            filterStatus(value, row) {
                return row.status === value;
            }
        }
    }
</script>

<style scoped>
    .el-breadcrumb {
        margin-bottom: 15px;
        font-size: 12px;
    }

    .el-card {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
    }

    .el-table {
        margin-top: 15px;
        font-size: 12px;
    }

    .el-pagination {
        text-align: right;
        margin-top: 15px;
    }

</style>
